<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-12-01 16:53:29
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-27 15:52:09
-->
<template>
  <el-popover placement="bottom-start" title="" width="300" trigger="click" v-model="visible">
    <template #reference>
      <el-input
        v-model="iconValue"
        clearable
        ref="iconInput"
        maxlength="0"
        placeholder="点击选择图标"
        readonly
        @focus="visible = true"
        @blur="visible = false"
        @input="inputBlur"
      >
        <template #prefix>
          <em :class="iconValue ? iconValue : 'el-icon-search el-input__icon'"></em>
        </template>
        <span v-show="iconValue" slot="suffix" @click.stop="resetIcon()">
          <em class="el-icon-close" style="font-size: 1px; margin-left: 5px; cursor: pointer" />
        </span>
      </el-input>
    </template>
    <div class="icon-box" @mouseleave="mouseleave">
      <template v-if="showTooltip">
        <el-tooltip
          v-for="item in iconJsonList"
          :key="item.font_class"
          effect="light"
          :content="item.name"
          placement="top"
        >
          <span :class="`iconfont icon-${item.font_class}`" @click="checkIcon(item)"></span>
        </el-tooltip>
      </template>
      <template v-if="!showTooltip">
        <span
          v-for="item in iconJsonList"
          :key="item.font_class"
          :class="`iconfont icon-${item.font_class}`"
          @click="checkIcon(item)"
        ></span>
      </template>
    </div>
  </el-popover>
</template>
<script>
  import iconJson from '@package/components/src/bussines/icons/iconfont.json'

  export default {
    name: 'Hamburger',
    model: {
      prop: 'value',
      event: 'handleInput'
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      showTooltip: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        visible: false,
        iconValue: '',
        iconJsonList: iconJson.glyphs
      }
    },
    watch: {
      value(newVal) {
        this.iconValue = newVal
      }
    },
    mounted() {
      this.iconValue = this.value
    },
    methods: {
      inputBlur(val) {
        this.$emit('handleInput', val)
      },
      resetIcon() {
        this.iconValue = null
        this.$emit('handleInput', this.iconValue)
      },
      checkIcon(item) {
        const iconCode = `iconfont icon-${item.font_class}`
        this.$emit('handleInput', iconCode)
      },
      mouseleave() {
        this.visible = false
        this.$refs.iconInput.blur()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .icon-box {
    display: flex;
    overflow-y: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: 150px;

    .iconfont {
      flex-basis: auto;
      width: 25%;
      font-size: 24px;
      margin: 5px 0;
      cursor: pointer;
    }
  }
</style>
